<!--
营销方案生成系统首页 - 用户需求表单
功能：收集用户营销需求，包含8个核心字段，生成个性化营销方案
支持完整的工作流程：表单提交 -> 豆包生成方案 -> 用户确认 -> Kimi生成PPT
-->
<template>
  <div class="home-page">
    <!-- 英雄区域 -->
    <div class="hero-section">
      <div class="container">
        <div class="hero-content">
          <h1 class="hero-title">AI营销方案生成系统</h1>
          <p class="hero-subtitle">
            基于豆包AI和Kimi AI的智能分析，为您量身定制专业营销解决方案<br>
            从需求分析到PPT生成，一站式营销方案制作平台
          </p>
          
          <!-- 工作流程步骤 -->
          <div class="workflow-steps">
            <div class="step active">
              <div class="step-number">1</div>
              <div class="step-text">填写需求</div>
            </div>
            <div class="step-arrow">→</div>
            <div class="step">
              <div class="step-number">2</div>
              <div class="step-text">豆包生成方案</div>
            </div>
            <div class="step-arrow">→</div>
            <div class="step">
              <div class="step-number">3</div>
              <div class="step-text">确认满意</div>
            </div>
            <div class="step-arrow">→</div>
            <div class="step">
              <div class="step-number">4</div>
              <div class="step-text">Kimi生成PPT</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 表单区域 -->
    <div class="form-section">
      <div class="container">
        <div class="form-container">
          <div class="form-header">
            <h2>营销需求表单</h2>
            <p>请详细填写以下信息，AI将基于您的需求生成专业的营销方案</p>
            <div class="required-note">
              <span>*</span>
              <span>标记为必填项</span>
            </div>
          </div>

          <form @submit.prevent="submitForm" class="requirement-form">
            <div class="form-grid">
              <!-- 核心目标 -->
              <div class="form-group">
                <label class="form-label">
                  <span class="field-number">1</span>
                  <span class="label-text">核心目标</span>
                  <span class="required">*</span>
                </label>
                <input
                  v-model="formData.core_goal"
                  type="text"
                  class="form-input"
                  :class="{ error: errors.core_goal }"
                  placeholder="请输入核心目标"
                  @blur="validateField('core_goal')"
                />
                <div v-if="errors.core_goal" class="error-message">{{ errors.core_goal }}</div>
                <div class="field-hint">如：拉新、促活、品牌曝光、贵宾维护、产品发布会</div>
              </div>

              <!-- 目标受众 -->
              <div class="form-group">
                <label class="form-label">
                  <span class="field-number">2</span>
                  <span class="label-text">目标受众</span>
                  <span class="required">*</span>
                </label>
                <input
                  v-model="formData.target_audience"
                  type="text"
                  class="form-input"
                  :class="{ error: errors.target_audience }"
                  placeholder="请描述目标受众群体"
                  @blur="validateField('target_audience')"
                />
                <div v-if="errors.target_audience" class="error-message">{{ errors.target_audience }}</div>
                <div class="field-hint">如：年轻白领、大学生、有车一族、年轻家庭、高净值客户</div>
              </div>

              <!-- 人均预算 -->
              <div class="form-group">
                <label class="form-label">
                  <span class="field-number">3</span>
                  <span class="label-text">人均预算</span>
                  <span class="required">*</span>
                </label>
                <input
                  v-model="formData.budget_per_person"
                  type="text"
                  class="form-input"
                  :class="{ error: errors.budget_per_person }"
                  placeholder="请输入预算范围"
                  @blur="validateField('budget_per_person')"
                />
                <div v-if="errors.budget_per_person" class="error-message">{{ errors.budget_per_person }}</div>
                <div class="field-hint">如：经济型（100元以下）、性价比（100-500元）、高端（500元以上）</div>
              </div>

              <!-- 方案侧重点 -->
              <div class="form-group">
                <label class="form-label">
                  <span class="field-number">4</span>
                  <span class="label-text">方案侧重点</span>
                  <span class="required">*</span>
                </label>
                <input
                  v-model="formData.focus_point"
                  type="text"
                  class="form-input"
                  :class="{ error: errors.focus_point }"
                  placeholder="请输入方案侧重点"
                  @blur="validateField('focus_point')"
                />
                <div v-if="errors.focus_point" class="error-message">{{ errors.focus_point }}</div>
                <div class="field-hint">如：最大化参与率、提升客单价、强化品牌形象、提升忠诚度</div>
              </div>

              <!-- 礼品类型偏好 -->
              <div class="form-group">
                <label class="form-label">
                  <span class="field-number">5</span>
                  <span class="label-text">礼品类型偏好</span>
                </label>
                <input
                  v-model="formData.gift_preference"
                  type="text"
                  class="form-input"
                  placeholder="请输入礼品类型偏好（选填）"
                />
                <div class="field-hint">如：实体礼品、虚拟权益、均可</div>
              </div>

              <!-- 具体产品 -->
              <div class="form-group">
                <label class="form-label">
                  <span class="field-number">6</span>
                  <span class="label-text">具体产品</span>
                </label>
                <input
                  v-model="formData.specific_product"
                  type="text"
                  class="form-input"
                  placeholder="请描述具体产品（选填）"
                />
                <div class="field-hint">可描述产品名称和关键特征</div>
              </div>

              <!-- 客户偏好 -->
              <div class="form-group full-width">
                <label class="form-label">
                  <span class="field-number">7</span>
                  <span class="label-text">客户偏好</span>
                  <span class="required">*</span>
                </label>
                <textarea
                  v-model="formData.customer_preference"
                  class="form-textarea"
                  :class="{ error: errors.customer_preference }"
                  placeholder="请详细描述客户偏好和特点，如消费习惯、兴趣爱好、行为特征等"
                  @blur="validateField('customer_preference')"
                ></textarea>
                <div v-if="errors.customer_preference" class="error-message">{{ errors.customer_preference }}</div>
                <div class="field-hint">详细描述有助于AI生成更精准的营销方案</div>
              </div>

              <!-- 客户痛点 -->
              <div class="form-group full-width">
                <label class="form-label">
                  <span class="field-number">8</span>
                  <span class="label-text">客户痛点</span>
                  <span class="required">*</span>
                </label>
                <textarea
                  v-model="formData.customer_pain_points"
                  class="form-textarea"
                  :class="{ error: errors.customer_pain_points }"
                  placeholder="请详细描述客户面临的主要痛点和挑战，如需求未满足、体验不佳等问题"
                  @blur="validateField('customer_pain_points')"
                ></textarea>
                <div v-if="errors.customer_pain_points" class="error-message">{{ errors.customer_pain_points }}</div>
                <div class="field-hint">准确识别痛点是制定有效营销策略的关键</div>
              </div>
            </div>

            <!-- 操作按钮 -->
            <div class="form-actions">
              <button type="button" @click="resetForm" class="btn btn-secondary">
                <span class="icon-reset"></span>
                重置表单
              </button>
              <button type="submit" :disabled="isSubmitting" class="btn btn-primary">
                <span :class="isSubmitting ? 'icon-loading' : 'icon-next'"></span>
                {{ isSubmitting ? '提交中...' : '开始AI分析' }}
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useMarketingStore } from '../stores/marketing'
import { requirementAPI } from '../utils/api'

const router = useRouter()
const marketingStore = useMarketingStore()

// 表单数据 - 8个核心字段
const formData = reactive({
  core_goal: '',           // 1. 核心目标 (必填)
  target_audience: '',     // 2. 目标受众 (必填)
  budget_per_person: '',   // 3. 人均预算 (必填)
  focus_point: '',         // 4. 方案侧重点 (必填)
  gift_preference: '',     // 5. 礼品类型偏好 (选填)
  specific_product: '',    // 6. 具体产品 (选填)
  customer_preference: '', // 7. 客户偏好 (必填)
  customer_pain_points: '' // 8. 客户痛点 (必填)
})

// 表单验证错误
const errors = reactive({})

// 提交状态
const isSubmitting = ref(false)

// 验证单个字段
const validateField = (fieldName) => {
  const requiredFields = {
    core_goal: '核心目标',
    target_audience: '目标受众',
    budget_per_person: '人均预算',
    focus_point: '方案侧重点',
    customer_preference: '客户偏好',
    customer_pain_points: '客户痛点'
  }

  const fieldLabel = requiredFields[fieldName]
  if (!fieldLabel) return true

  const value = formData[fieldName]
  
  if (!value || value.trim() === '') {
    errors[fieldName] = `${fieldLabel}不能为空`
    return false
  }
  
  if (value.trim().length < 2) {
    errors[fieldName] = `${fieldLabel}至少需要2个字符`
    return false
  }
  
  // 特殊验证：客户偏好和客户痛点需要更详细的内容
  if ((fieldName === 'customer_preference' || fieldName === 'customer_pain_points') && value.trim().length < 10) {
    errors[fieldName] = `${fieldLabel}描述至少需要10个字符，请提供更详细的信息`
    return false
  }
  
  delete errors[fieldName]
  return true
}

// 表单验证
const validateForm = () => {
  // 清空之前的错误
  Object.keys(errors).forEach(key => {
    delete errors[key]
  })

  let isValid = true

  // 必填字段验证 - 6个必填字段
  const requiredFields = [
    'core_goal',
    'target_audience', 
    'budget_per_person',
    'focus_point',
    'customer_preference',
    'customer_pain_points'
  ]

  requiredFields.forEach(field => {
    if (!validateField(field)) {
      isValid = false
    }
  })

  return isValid
}

// 滚动到第一个错误字段
const scrollToFirstError = () => {
  const firstErrorField = Object.keys(errors).find(key => errors[key])
  if (firstErrorField) {
    const element = document.querySelector(`input[name="${firstErrorField}"], textarea[name="${firstErrorField}"]`)
    if (element) {
      element.scrollIntoView({ behavior: 'smooth', block: 'center' })
      element.focus()
    }
  }
}

// 提交表单
const submitForm = async () => {
  if (!validateForm()) {
    scrollToFirstError()
    return
  }

  isSubmitting.value = true

  try {
    // 发送数据到后端API
    const result = await requirementAPI.submitRequirement({
      core_goal: formData.core_goal.trim(),
      target_audience: formData.target_audience.trim(),
      budget_per_person: formData.budget_per_person.trim(),
      focus_point: formData.focus_point.trim(),
      gift_preference: formData.gift_preference.trim() || null,
      specific_product: formData.specific_product.trim() || null,
      customer_preference: formData.customer_preference.trim(),
      customer_pain_points: formData.customer_pain_points.trim()
    })

    // 保存需求ID和数据到store
    marketingStore.setRequirementData({
      id: result.id,
      core_goal: formData.core_goal,
      target_audience: formData.target_audience,
      budget_per_person: formData.budget_per_person,
      focus_point: formData.focus_point,
      gift_preference: formData.gift_preference,
      specific_product: formData.specific_product,
      customer_preference: formData.customer_preference,
      customer_pain_points: formData.customer_pain_points,
      created_at: result.created_at
    })

    // 显示成功消息
    alert('需求提交成功！正在跳转到豆包AI分析页面...')
    
    // 跳转到豆包页面开始生成方案
    router.push('/doubao')
  } catch (error) {
    console.error('提交失败:', error)
    alert(`提交失败：${error.message}\n请检查网络连接后重试`)
  } finally {
    isSubmitting.value = false
  }
}

// 重置表单
const resetForm = () => {
  if (confirm('确定要重置表单吗？所有已填写的内容将被清空。')) {
    Object.keys(formData).forEach(key => {
      formData[key] = ''
    })
    Object.keys(errors).forEach(key => {
      delete errors[key]
    })
    
    // 滚动到顶部
    window.scrollTo({ top: 0, behavior: 'smooth' })
  }
}
</script>

<style scoped>
.home-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.hero-section {
  padding: 60px 0 40px;
  color: white;
  text-align: center;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.hero-content {
  max-width: 800px;
  margin: 0 auto;
}

.hero-title {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  background: linear-gradient(45deg, #ffffff, #f0f8ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: 1.3rem;
  opacity: 0.95;
  margin-bottom: 40px;
  line-height: 1.6;
}

/* 工作流程步骤 */
.workflow-steps {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 40px;
  flex-wrap: wrap;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0.6;
  transition: all 0.3s ease;
}

.step.active {
  opacity: 1;
  transform: scale(1.1);
}

.step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.1rem;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.step.active .step-number {
  background: rgba(255, 255, 255, 0.9);
  color: #667eea;
  border-color: rgba(255, 255, 255, 0.9);
}

.step-text {
  font-size: 0.9rem;
  font-weight: 500;
}

.step-arrow {
  font-size: 1.5rem;
  opacity: 0.7;
  margin: 0 10px;
}

/* 表单区域 */
.form-section {
  padding: 40px 0 60px;
  background: #f8fafc;
}

.form-container {
  background: white;
  border-radius: 20px;
  padding: 50px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
  max-width: 900px;
  margin: 0 auto;
}

.form-header {
  text-align: center;
  margin-bottom: 40px;
}

.form-header h2 {
  font-size: 2.2rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 12px;
}

.form-header p {
  font-size: 1.1rem;
  color: #6b7280;
  margin-bottom: 16px;
}

.required-note {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.9rem;
  color: #9ca3af;
  background: #f3f4f6;
  padding: 6px 12px;
  border-radius: 20px;
}

/* 表单网格 */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-bottom: 40px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group.full-width {
  grid-column: 1 / -1;
}

.form-label {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  font-weight: 600;
  color: #374151;
  font-size: 1rem;
}

.field-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: #667eea;
  color: white;
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: bold;
  margin-right: 8px;
}

.required {
  color: #ef4444;
  font-weight: bold;
  margin-left: 4px;
}

.form-input,
.form-textarea {
  padding: 14px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  font-size: 15px;
  transition: all 0.3s ease;
  background: #fafafa;
  font-family: inherit;
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: #667eea;
  background: white;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
  transform: translateY(-1px);
}

.form-input.error,
.form-textarea.error {
  border-color: #ef4444;
  background: #fef2f2;
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}

.field-hint {
  font-size: 0.85rem;
  color: #6b7280;
  margin-top: 6px;
  font-style: italic;
}

.error-message {
  color: #ef4444;
  font-size: 0.85rem;
  margin-top: 6px;
  font-weight: 500;
}

/* 表单操作按钮 */
.form-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid #e5e7eb;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  min-width: 180px;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

.btn-secondary {
  background: #f8fafc;
  color: #374151;
  border: 2px solid #e5e7eb;
}

.btn-secondary:hover {
  background: #f1f5f9;
  border-color: #d1d5db;
  transform: translateY(-1px);
}

/* 图标样式 */
.icon-reset::before {
  content: '↻';
  font-size: 1.1rem;
}

.icon-next::before {
  content: '→';
  font-size: 1.1rem;
}

.icon-loading::before {
  content: '⟳';
  font-size: 1.1rem;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .hero-title {
    font-size: 2.5rem;
  }
  
  .hero-subtitle {
    font-size: 1.1rem;
  }
  
  .workflow-steps {
    gap: 15px;
  }
  
  .step-number {
    width: 35px;
    height: 35px;
    font-size: 1rem;
  }
  
  .step-text {
    font-size: 0.8rem;
  }
  
  .step-arrow {
    font-size: 1.2rem;
    margin: 0 5px;
  }
  
  .form-container {
    padding: 30px 25px;
    margin: 0 15px;
  }
  
  .form-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  
  .form-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .btn {
    width: 100%;
    max-width: 300px;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 15px;
  }
  
  .hero-title {
    font-size: 2rem;
  }
  
  .hero-subtitle {
    font-size: 1rem;
  }
  
  .workflow-steps {
    flex-direction: column;
    gap: 20px;
  }
  
  .step-arrow {
    transform: rotate(90deg);
  }
  
  .form-container {
    padding: 25px 20px;
  }
  
  .form-header h2 {
    font-size: 1.8rem;
  }
}
</style>